<template>
	<div id="app">
		<Title></Title>
		<el-tabs v-model="activeName">
			<el-tab-pane label="航空器1" name="1">
				<Time :msgObj="updData"></Time>
				<div class="data-container">
					<Status :type="isConnect"></Status>
					<Datas :msgObj="updData"></Datas>
				</div>
				<div class="charts-container">
					<el-card shadow="hover" class="charts-item">
						<div slot="header" class="clearfix">速度： {{ updData.normalSpeed }} km/h</div>
						<div class="speed-chart" ref="speed"></div>
					</el-card>
					<el-card shadow="hover" class="charts-item">
						<div slot="header" class="clearfix">真北方向：{{ updData.course }}°</div>
						<div class="speed-chart" ref="course"></div>
					</el-card>
				</div>
			</el-tab-pane>
			<el-tab-pane label="航空器2" name="2">
				<Time :msgObj="updData2"></Time>
				<div class="data-container">
					<Status :type="isConnect2"></Status>
					<Datas :msgObj="updData2"></Datas>
				</div>
				<div class="charts-container">
					<el-card shadow="hover" class="charts-item">
						<div slot="header" class="clearfix">速度： {{ updData2.normalSpeed }} km/h</div>
						<div class="speed-chart" ref="speed2"></div>
					</el-card>
					<el-card shadow="hover" class="charts-item">
						<div slot="header" class="clearfix">真北方向：{{ updData2.course }}°</div>
						<div class="speed-chart" ref="course2"></div>
					</el-card>
				</div>
			</el-tab-pane>
			<el-tab-pane label="航空器3" name="3">
				<Time :msgObj="updData3"></Time>
				<div class="data-container">
					<Status :type="isConnect3"></Status>
					<Datas :msgObj="updData3"></Datas>
				</div>
				<div class="charts-container">
					<el-card shadow="hover" class="charts-item">
						<div slot="header" class="clearfix">速度： {{ updData3.normalSpeed }} km/h</div>
						<div class="speed-chart" ref="speed3"></div>
					</el-card>
					<el-card shadow="hover" class="charts-item">
						<div slot="header" class="clearfix">真北方向：{{ updData3.course }}°</div>
						<div class="speed-chart" ref="course3"></div>
					</el-card>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-card class="localStatus" shadow="hover">
			<div slot="header" class="clearfix">当前连接设备信号</div>
			<div class="card-content">
				<!-- 信号强度值1,2,3 -->
				<Signal :strength="signalValue"></Signal>
				<div class="num-container">
					波束1强度
					<animate-number
						class="number"
						:from="0"
						:to="+wx1 || 0"
						:key="wx1 + 'A'"
						duration="300"
					></animate-number>
				</div>
				<div class="num-container">
					波束2强度
					<animate-number
						class="number"
						:from="0"
						:to="+wx2 || 0"
						:key="wx2 + 'B'"
						duration="300"
					></animate-number>
				</div>
				<div class="num-container">
					波束3强度
					<animate-number
						class="number"
						:from="0"
						:to="+wx3 || 0"
						:key="wx3 + 'C'"
						duration="300"
					></animate-number>
				</div>
				<div class="num-container">
					波束4强度
					<animate-number
						class="number"
						:from="0"
						:to="+wx4 || 0"
						:key="wx4 + 'D'"
						duration="300"
					></animate-number>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import Title from './components/Title.vue'
import Status from './components/Status.vue'
import Datas from './pages/Datas.vue'
import Time from './components/Time.vue'
import Signal from './components/Signal.vue'
export default {
	name: 'App',
	components: { Title, Status, Datas, Time, Signal },
	data() {
		return {
			updData: {
				hour: '--',
				minute: '--',
				second: '--',
				weidu: '--.--',
				weiduP: '-',
				jingdu: '--.--',
				jingduP: '-',
				altitude: '--.--',
				height: '--.--',
				normalSpeed: '--.--',
				course: '--',
				year: '----',
				month: '--',
				day: '--',
				valid: '1',
				uid: '1',
			},
			updData2: {
				hour: '--',
				minute: '--',
				second: '--',
				weidu: '--.--',
				weiduP: '-',
				jingdu: '--.--',
				jingduP: '-',
				altitude: '--.--',
				height: '--.--',
				normalSpeed: '--.--',
				course: '--',
				year: '----',
				month: '--',
				day: '--',
				valid: '1',
				uid: '2',
			},
			updData3: {
				hour: '--',
				minute: '--',
				second: '--',
				weidu: '--.--',
				weiduP: '-',
				jingdu: '--.--',
				jingduP: '-',
				altitude: '--.--',
				height: '--.--',
				normalSpeed: '--.--',
				course: '--',
				year: '----',
				month: '--',
				day: '--',
				valid: '1',
				uid: '3',
			},
			isConnect: false,
			isConnect2: false,
			isConnect3: false,
			updateTime: new Date().getTime(),
			updateTime2: new Date().getTime(),
			updateTime3: new Date().getTime(),
			timer: null,
			speedChart: null,
			speedChart2: null,
			speedChart3: null,
			courseChart: null,
			courseChart2: null,
			courseChart3: null,
			// 航空器1
			option: {
				title: {
					text: '速度折线图',
				},
				tooltip: {
					formatter: '速度: {c} km/h',
				},
				legend: {
					data: ['速度'],
				},
				xAxis: {
					// 配置横坐标
					data: [],
				},
				yAxis: {},
				series: [
					{
						name: '速度', // 对应到图例
						type: 'line',
						// 配置数据-数据data对应x轴个数
						data: [],
						smooth: true,
					},
				],
			},
			option2: {
				series: [
					{
						name: 'hour',
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						min: 0,
						max: 360,
						splitNumber: 12,
						clockwise: true,
						axisLine: {
							lineStyle: {
								width: 5,
								color: [[1, 'rgba(0,0,0,0.7)']],
								shadowColor: 'rgba(0, 0, 0, 0.5)',
								shadowBlur: 15,
							},
						},
						splitLine: {
							lineStyle: {
								shadowColor: 'rgba(0, 0, 0, 0.3)',
								shadowBlur: 3,
								shadowOffsetX: 1,
								shadowOffsetY: 2,
							},
						},
						axisLabel: {
							fontSize: 12,
							distance: 5,
							formatter: function (value) {
								if (value === 0) {
									return ''
								}
								return value + ''
							},
						},
						anchor: {
							show: true,
							icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
							showAbove: false,
							offsetCenter: [0, '-35%'],
							size: 0,
							keepAspect: true,
							itemStyle: {
								color: '#707177',
							},
						},
						pointer: {
							icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
							width: 5,
							length: '80%',
							offsetCenter: [0, '8%'],
							itemStyle: {
								color: '#C0911F',
								shadowColor: 'rgba(0, 0, 0, 0.3)',
								shadowBlur: 8,
								shadowOffsetX: 2,
								shadowOffsetY: 4,
							},
						},
						detail: {
							show: false,
						},
						title: {
							offsetCenter: [0, '30%'],
						},
						data: [
							{
								value: 0,
							},
						],
					},
				],
			},
			// 航空器2
			option3: {
				title: {
					text: '速度折线图2',
				},
				tooltip: {
					formatter: '速度: {c} km/h',
				},
				legend: {
					data: ['速度'],
				},
				xAxis: {
					// 配置横坐标
					data: [],
				},
				yAxis: {},
				series: [
					{
						name: '速度', // 对应到图例
						type: 'line',
						// 配置数据-数据data对应x轴个数
						data: [],
						smooth: true,
					},
				],
			},
			option4: {
				series: [
					{
						name: 'hour',
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						min: 0,
						max: 360,
						splitNumber: 12,
						clockwise: true,
						axisLine: {
							lineStyle: {
								width: 5,
								color: [[1, 'rgba(0,0,0,0.7)']],
								shadowColor: 'rgba(0, 0, 0, 0.5)',
								shadowBlur: 15,
							},
						},
						splitLine: {
							lineStyle: {
								shadowColor: 'rgba(0, 0, 0, 0.3)',
								shadowBlur: 3,
								shadowOffsetX: 1,
								shadowOffsetY: 2,
							},
						},
						axisLabel: {
							fontSize: 12,
							distance: 5,
							formatter: function (value) {
								if (value === 0) {
									return ''
								}
								return value + ''
							},
						},
						anchor: {
							show: true,
							icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
							showAbove: false,
							offsetCenter: [0, '-35%'],
							size: 0,
							keepAspect: true,
							itemStyle: {
								color: '#707177',
							},
						},
						pointer: {
							icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
							width: 5,
							length: '80%',
							offsetCenter: [0, '8%'],
							itemStyle: {
								color: '#C0911F',
								shadowColor: 'rgba(0, 0, 0, 0.3)',
								shadowBlur: 8,
								shadowOffsetX: 2,
								shadowOffsetY: 4,
							},
						},
						detail: {
							show: false,
						},
						title: {
							offsetCenter: [0, '30%'],
						},
						data: [
							{
								value: 0,
							},
						],
					},
				],
			},
			// 航空器3
			option5: {
				title: {
					text: '速度折线图3',
				},
				tooltip: {
					formatter: '速度: {c} km/h',
				},
				legend: {
					data: ['速度'],
				},
				xAxis: {
					// 配置横坐标
					data: [],
				},
				yAxis: {},
				series: [
					{
						name: '速度', // 对应到图例
						type: 'line',
						// 配置数据-数据data对应x轴个数
						data: [],
						smooth: true,
					},
				],
			},
			option6: {
				series: [
					{
						name: 'hour',
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						min: 0,
						max: 360,
						splitNumber: 12,
						clockwise: true,
						axisLine: {
							lineStyle: {
								width: 5,
								color: [[1, 'rgba(0,0,0,0.7)']],
								shadowColor: 'rgba(0, 0, 0, 0.5)',
								shadowBlur: 15,
							},
						},
						splitLine: {
							lineStyle: {
								shadowColor: 'rgba(0, 0, 0, 0.3)',
								shadowBlur: 3,
								shadowOffsetX: 1,
								shadowOffsetY: 2,
							},
						},
						axisLabel: {
							fontSize: 12,
							distance: 5,
							formatter: function (value) {
								if (value === 0) {
									return ''
								}
								return value + ''
							},
						},
						anchor: {
							show: true,
							icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
							showAbove: false,
							offsetCenter: [0, '-35%'],
							size: 0,
							keepAspect: true,
							itemStyle: {
								color: '#707177',
							},
						},
						pointer: {
							icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
							width: 5,
							length: '80%',
							offsetCenter: [0, '8%'],
							itemStyle: {
								color: '#C0911F',
								shadowColor: 'rgba(0, 0, 0, 0.3)',
								shadowBlur: 8,
								shadowOffsetX: 2,
								shadowOffsetY: 4,
							},
						},
						detail: {
							show: false,
						},
						title: {
							offsetCenter: [0, '30%'],
						},
						data: [
							{
								value: 0,
							},
						],
					},
				],
			},
			// 本地设备信号强度指示灯取值:1,2,3
			signalValue: 0,
			wx1: 0,
			wx2: 0,
			wx3: 0,
			wx4: 0,
			// el-tab
			activeName: '1',
		}
	},
	mounted() {
		// 当前页面启动时,定义接受UDP数据
		window.electronAPI.onGetUdpData((e, value) => {
			if (value.uid === '1') {
				this.updData = value
				this.isConnect = true
				// 有数据传过来更新-更新事件
				this.updateTime = new Date().getTime()
				// 添加数据到折线图
				this.setSpeedCharts(value)
				// 添加数据到方向图
				this.setCourseCharts(value)
			} else if (value.uid === '2') {
				this.updData2 = value
				this.isConnect2 = true
				this.updateTime2 = new Date().getTime()
				this.setSpeedCharts2(value) // 2222
				this.setCourseCharts2(value) // 2222
			} else if (value.uid === '3') {
				this.updData3 = value
				this.isConnect3 = true
				this.updateTime3 = new Date().getTime()
				this.setSpeedCharts3(value) // 2222
				this.setCourseCharts3(value) // 2222
			}
		})
		// 接受地面设备的UDP数据
		window.electronAPI.onGetUdpLocalData((e, value) => {
			if (value.resCount === 0) {
				this.signalValue = value.resCount
			} else if (value.wx1) {
				this.wx1 = value.wx1
				this.wx2 = value.wx2
				this.wx3 = value.wx3
				this.wx4 = value.wx5
				if (value.resCount >= 4) {
					this.signalValue = 6
				} else if (value.resCount >= 3) {
					this.signalValue = Math.random() >= 0.2 ? 5 : 4
				} else if (value.resCount >= 2) {
					this.signalValue = Math.random() >= 0.2 ? 3 : 2
				} else if (value.resCount >= 1) {
					this.signalValue = 1
				}
			}
		})
		// 启动一个定时器,如果80秒无数据则显示未连接
		this.timer = setInterval(() => {
			let current = new Date().getTime()
			if (current - this.updateTime > 120 * 1000) {
				this.isConnect = false
			}
			if (current - this.updateTime2 > 120 * 1000) {
				this.isConnect2 = false
			}
			if (current - this.updateTime3 > 120 * 1000) {
				this.isConnect3 = false
			}
		}, 70 * 1000)
		// 绘制速度图
		this.speedChart = this.$echarts.init(this.$refs['speed'])
		this.courseChart = this.$echarts.init(this.$refs['course'])
		this.speedChart2 = this.$echarts.init(this.$refs['speed2'])
		this.courseChart2 = this.$echarts.init(this.$refs['course2'])
		this.speedChart3 = this.$echarts.init(this.$refs['speed3'])
		this.courseChart3 = this.$echarts.init(this.$refs['course3'])
		// 添加窗口变化事件，让echarts图形自动适应
		window.onresize = () => {
			this.speedChart.resize()
			this.courseChart.resize()
			this.speedChart2.resize()
			this.courseChart2.resize()
			this.speedChart3.resize()
			this.courseChart3.resize()
		}
	},
	destroyed() {
		clearInterval(this.timer)
		this.timer = null
	},
	watch: {
		activeName(val) {
			if (val === '1') {
				this.$nextTick(() => {
					this.speedChart.resize()
					this.courseChart.resize()
				})
			} else if (val === '2') {
				this.$nextTick(() => {
					this.speedChart2.resize()
					this.courseChart2.resize()
				})
			} else if (val === '3') {
				this.$nextTick(() => {
					this.speedChart3.resize()
					this.courseChart3.resize()
				})
			}
		},
	},
	methods: {
		// 航天器1
		setSpeedCharts(udpObj) {
			this.option.xAxis.data.push(udpObj.hour + ':' + udpObj.minute + ':' + udpObj.second)
			this.option.series[0].data.push(parseFloat(udpObj.normalSpeed))
			if (this.option.xAxis.data.length > 30) {
				this.option.xAxis.data.shift()
			}
			if (this.option.series[0].data.length > 30) {
				this.option.series[0].data.shift()
			}
			this.speedChart.setOption(this.option)
		},
		setCourseCharts(udpObj) {
			this.option2.series[0].data = [udpObj.course]
			this.courseChart.setOption(this.option2)
		},
		// 航天器2
		setSpeedCharts2(udpObj) {
			this.option3.xAxis.data.push(udpObj.hour + ':' + udpObj.minute + ':' + udpObj.second)
			this.option3.series[0].data.push(parseFloat(udpObj.normalSpeed))
			if (this.option3.xAxis.data.length > 30) {
				this.option3.xAxis.data.shift()
			}
			if (this.option3.series[0].data.length > 30) {
				this.option3.series[0].data.shift()
			}
			this.speedChart2.setOption(this.option3)
		},
		setCourseCharts2(udpObj) {
			this.option4.series[0].data = [udpObj.course]
			this.courseChart2.setOption(this.option4)
		},
		// 航天器3
		setSpeedCharts3(udpObj) {
			this.option5.xAxis.data.push(udpObj.hour + ':' + udpObj.minute + ':' + udpObj.second)
			this.option5.series[0].data.push(parseFloat(udpObj.normalSpeed))
			if (this.option5.xAxis.data.length > 30) {
				this.option5.xAxis.data.shift()
			}
			if (this.option5.series[0].data.length > 30) {
				this.option5.series[0].data.shift()
			}
			this.speedChart3.setOption(this.option5)
		},
		setCourseCharts3(udpObj) {
			this.option6.series[0].data = [udpObj.course]
			this.courseChart3.setOption(this.option6)
		},
	},
}
</script>

<style lang="less" scoped>
.speed-chart {
	width: 100%;
	height: 250px;
}
.data-container {
	width: 100%;
	display: flex;
	justify-content: center;
	height: 100px;
	margin-bottom: 10px;
	.status-container {
		width: 30%;
	}
	.datas-container {
		width: 70%;
	}
}
.normal-speed {
	width: 100%;
}
.charts-container {
	display: flex;
	.charts-item {
		width: 100%;
	}
}
.charts-item {
	margin: 0 2px;
}
.localStatus {
	margin: 2px 2px;
}
.card-content {
	display: flex;
	justify-content: space-around;
	align-items: center;
	.number {
		font-size: 20px;
		text-align: center;
		margin-top: 2px;
	}
}
.num-container {
	display: flex;
	flex-direction: column;
}
/deep/ .el-tabs__header {
	margin: 0;
}
</style>
